<template>
    <div class="main-container">
        <div class="search">搜索信息</div>
        <i class="left el-icon-arrow-left"></i>
        <el-tabs v-model="editableTabsValue" type="card" class="tabs">
          <el-tab-pane
            :key="item.name"
            v-for="item in editableTabs"
            :label="item.title"
            :name="item.name"
          >
            <router-view />
          </el-tab-pane>
        </el-tabs>
        <div class="right">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="down">
          <i class="el-icon-arrow-down"></i>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MainView',
  props: {},
  components: { },
  data () {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: '首页',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: '学生管理',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  },
  created () {
  },
  watch: {
    tab (newObj, oldObj) {
      // this.tabIndex = (Math.max(...this.editableTabs.map(item => item.name)) + 1) + ''
      this.editableTabs[1] = {
        title: newObj.name,
        name: '2'
      }
    }
  },
  computed: {
    ...mapState(['tab'])
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
  .main-container{
    display: flex;
    position: relative;
    .search{
      position: absolute;
      font-size: 16px;
      top:46px;
      left: 51px;
      z-index: 999;
    }
    .left{
      font-size: 25px;
      position: absolute;
      top: 9px;
    }
    .tabs{
      position: absolute;
      left: 37px;
    }
    .right{
      position: absolute;
      right:52px;
      top: -8px;
      font-size: 25px;
      height: 40px;
      border-left: 2px solid #E6E6E6;
      padding-left: 10px;
    }
    .down{
      position: absolute;
      right:5px;
      top: -8px;
      font-size: 25px;
      height: 40px;
      border-left: 2px solid #E6E6E6;
      padding-left: 10px;
    }
  }
</style>
